DateRangeSelector.render - Code Metrics - ridi/simple-service-status - Measure and Improve Code Quality continuously with Scrutinizer

DateRangeSelector.render B
last analyzed 2020-09-05 02:41 UTC

↳ Parent: DateRangeSelector

Complexity

Conditions

Size

Total Lines	59
Code Lines	54

Duplication

Lines	0
Ratio	0 %

Importance

Changes

Metric	Value
cc	3
eloc	54
dl	0
loc	59
rs	8.5054
c	0
b	0
f	0

How to fix Long Method

import React from 'react';
import PropTypes from 'prop-types';

import {
  FormControl,
  ButtonToolbar,
  ButtonGroup,
  Button,OverlayTrigger,
  Tooltip,
} from 'react-bootstrap';

import DateTime from 'react-datetime';

const dateFormat = 'YYYY-MM-DD';
const timeFormat = 'HH:mm';
const defaultCondition = { comparator: '~' };

export default class DateRangeSelector extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: defaultCondition,
    };
  }

  componentWillReceiveProps(newProps) {
    if (newProps.value) {
      this.setState({ value: newProps.value });
    }
  }

  onDateChanged(changedItem) {
    const newState = {
      value: Object.assign({}, this.state.value, changedItem),
    };
    this.setState(newState, () => {
      if (typeof this.props.onChange === 'function') {
        this.props.onChange(this.state.value);
      }
    });
  }

  render() {
    const value = this.state.value || defaultCondition;  // default
    return (
      <div className="date-range-selector-container">
        <div className="selector-item">
          <ButtonToolbar className="selector-comparator">
            <ButtonGroup>
              <OverlayTrigger placement="top" overlay={<Tooltip>모든 범위</Tooltip>}>
                <Button
                  active={value.comparator === '*'}
                  onClick={() => this.onDateChanged({ comparator: '*' })}
                  disabled={this.props.disabled}
                >
                  &#x2731; {/* asterisk */}
                </Button>
              </OverlayTrigger>
              <OverlayTrigger placement="top" overlay={<Tooltip>범위 지정</Tooltip>}>
                <Button
                  active={value.comparator === '~'}
                  onClick={() => this.onDateChanged({ comparator: '~' })}
                  disabled={this.props.disabled}
                >
                  &#x0223C; {/* tilda */}
                </Button>
              </OverlayTrigger>
            </ButtonGroup>
          </ButtonToolbar>
          <FormControl
            className="selector-inputs"
            type="text"
            value={'모든 기간 대상'}
            style={value.comparator !== '*' ? { display: 'none' } : {}}
            readOnly
          />
          <div className="selector-inputs-container" style={value.comparator !== '~' ? { display: 'none' } : {}}>
            <DateTime
              className="selector-inputs"
              value={value.startTime}
              inputProps={{ placeholder: '시작 일시' }}
              dateFormat={dateFormat}
              timeFormat={timeFormat}
              onChange={startTime => this.onDateChanged({ startTime })}
              disabled={this.props.disabled}
              closeOnSelect
            />
            <DateTime
              className="selector-inputs selector-inputs-second"
              value={value.endTime}
              inputProps={{ placeholder: '종료 일시' }}
              dateFormat={dateFormat}
              timeFormat={timeFormat}
              onChange={endTime => this.onDateChanged({ endTime })}
              disabled={this.props.disabled}
              closeOnSelect
            />
          </div>
        </div>
      </div>
    );
  }
}

DateRangeSelector.propTypes = {
  value: PropTypes.shape({
    comparator: PropTypes.string.isRequired,
    startTime: PropTypes.string,
    endTime: PropTypes.string,
  }),
  onChange: PropTypes.func,
  disabled: PropTypes.bool,
};


1			import React from 'react';
2			import PropTypes from 'prop-types';
3
4			import {
5			FormControl,
6			ButtonToolbar,
7			ButtonGroup,
8			Button,OverlayTrigger,
9			Tooltip,
10			} from 'react-bootstrap';
11
12			import DateTime from 'react-datetime';
13
14			const dateFormat = 'YYYY-MM-DD';
15			const timeFormat = 'HH:mm';
16			const defaultCondition = { comparator: '~' };
17
18			export default class DateRangeSelector extends React.Component {
19			constructor(props) {
20			super(props);
21			this.state = {
22			value: defaultCondition,
23			};
24			}
25
26			componentWillReceiveProps(newProps) {
27			if (newProps.value) {
28			this.setState({ value: newProps.value });
29			}
30			}
31
32			onDateChanged(changedItem) {
33			const newState = {
34			value: Object.assign({}, this.state.value, changedItem),
35			};
36			this.setState(newState, () => {
37			if (typeof this.props.onChange === 'function') {
38			this.props.onChange(this.state.value);
39			}
40			});
41			}
42
43			render() {
44			const value = this.state.value \|\| defaultCondition; // default
45			return (
46			<div className="date-range-selector-container">
47			<div className="selector-item">
48			<ButtonToolbar className="selector-comparator">
49			<ButtonGroup>
50			<OverlayTrigger placement="top" overlay={<Tooltip>모든 범위</Tooltip>}>
51			<Button
52			active={value.comparator === '*'}
53			onClick={() => this.onDateChanged({ comparator: '*' })}
54			disabled={this.props.disabled}
55			>
56			✱ {/* asterisk */}
57			</Button>
58			</OverlayTrigger>
59			<OverlayTrigger placement="top" overlay={<Tooltip>범위 지정</Tooltip>}>
60			<Button
61			active={value.comparator === '~'}
62			onClick={() => this.onDateChanged({ comparator: '~' })}
63			disabled={this.props.disabled}
64			>
65			∼ {/* tilda */}
66			</Button>
67			</OverlayTrigger>
68			</ButtonGroup>
69			</ButtonToolbar>
70			<FormControl
71			className="selector-inputs"
72			type="text"
73			value={'모든 기간 대상'}
74			style={value.comparator !== '*' ? { display: 'none' } : {}}
75			readOnly
76			/>
77			<div className="selector-inputs-container" style={value.comparator !== '~' ? { display: 'none' } : {}}>
78			<DateTime
79			className="selector-inputs"
80			value={value.startTime}
81			inputProps={{ placeholder: '시작 일시' }}
82			dateFormat={dateFormat}
83			timeFormat={timeFormat}
84			onChange={startTime => this.onDateChanged({ startTime })}
85			disabled={this.props.disabled}
86			closeOnSelect
87			/>
88			<DateTime
89			className="selector-inputs selector-inputs-second"
90			value={value.endTime}
91			inputProps={{ placeholder: '종료 일시' }}
92			dateFormat={dateFormat}
93			timeFormat={timeFormat}
94			onChange={endTime => this.onDateChanged({ endTime })}
95			disabled={this.props.disabled}
96			closeOnSelect
97			/>
98			</div>
99			</div>
100			</div>
101			);
102			}
103			}
104
105			DateRangeSelector.propTypes = {
106			value: PropTypes.shape({
107			comparator: PropTypes.string.isRequired,
108			startTime: PropTypes.string,
109			endTime: PropTypes.string,
110			}),
111			onChange: PropTypes.func,
112			disabled: PropTypes.bool,
113			};
114

ridi / simple-service-status

DateRangeSelector.render B last analyzed 2020-09-05 02:41 UTC

Complexity

Size

Duplication

Importance

How to fix Long Method

Long Method

Duplication Side-by-Side

Filter issues like

DateRangeSelector.render B
last analyzed 2020-09-05 02:41 UTC